<template>
    <div class="roles">
        <el-card>
            <el-button type="primary"  @click="addone">添加角色</el-button>
            <!-- 表格 -->
              <el-table
              border
       :data="list"
       style="width: 100%">
       <!-- 展开行 -->
    <el-table-column type="expand">
      <template slot-scope="scope">  
            <el-row  v-for="item in scope.row.children" :key="item.id" >
                <el-col :span="5" >
                  <!-- 标签 -->
                  <el-tag  closable type="primary" @click="removeTrees(scope.row.id,item.id)">{{item.authName}}</el-tag>
                </el-col> 
                <el-col :span="18">
                    <el-row v-for="ele in item.children" :key="ele.id">
                        <el-col :span="6">
                        <el-tag  closable type="success" @click="removeTrees(scope.row.id,ele.id)" >{{ele.authName}}</el-tag>
                        </el-col>
                         <el-col :span="18">
                          <el-tag  closable type="warning" @click="removeTrees(scope.row.id,el.id)"  v-for="el in ele.children" :key="el.id"> {{el.authName}} </el-tag>
                         </el-col>
                    </el-row>
                </el-col>
            </el-row>
        
      </template>
    </el-table-column>
    <el-table-column
      label="#"
      type="index"
      width="50px"
      >
    </el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName">
    </el-table-column>
    <el-table-column
      label="角色描述"
      prop="roleDesc">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="warning" size="mini" @click="power(scope.row)">分配权限</el-button>
      </template>
    </el-table-column>
  </el-table>

        </el-card>
        <!-- 弹出框 -->
          <el-dialog :title="title" :visible.sync="dialogFormVisible">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm.roleName"></el-input>
           </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm.roleDesc"></el-input>
           </el-form-item>
        </el-form>
    
        <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary"  @click="addtwo">确 定</el-button>
       </div>
    </el-dialog>

    <!-- 权限弹出框 -->

             <el-dialog title="分配权限" :visible.sync="dialogVisible">

<el-tree
  :data="treelist"
  show-checkbox
  :default-expand-all="true"
   :efault-expanded-keys="idArr"
  :default-checked-keys="idArr"
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="disaggregate">确 定</el-button>
  </div>
</el-dialog>

    </div>
</template>
<script>
import {
  getRoles,
  addRole,
  deleteRole,
  editRole,
  getPermissions,
  RoleAuthorization,
  deleteRoleAuthorization
} from "@/utils/RolePermissions";
export default {
  data() {
    return {
      idArr: [],
      treelist: [],
      list: [],
      title: "添加用户",
      ruleForm: {
        roleName: "",
        roleDesc: ""
      },
      twotypeShow: true,
      etid: 0,
      dialogFormVisible: false,
      restockid: 0, //角色id
      rules: {
        roleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 6 个字符", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 8个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      defaultProps: {
        children: "children",
        label: "authName"
      }
    };
  },
  methods: {
    // 渲染
    getlist() {
      getRoles().then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    //  数据回填
    handleEdit(row) {
      this.etid = row.id;
      this.dialogFormVisible = true;
      this.title = "编辑用户";
      this.ruleForm = { ...row };
      this.twotypeShow =false
    },
    //   删除
    handleDelete(row) {
      deleteRole(row.id).then(res => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta.msg
            // duration: 2000,
          });
          this.getlist();
        }
      });
    },
    //  点击添加
    addone() {
      this.dialogFormVisible = true;
      this.title = "添加用户";
      //    this.twotypeShow=true
    },
    //  确定添加
    addtwo() {
      //     if(this.twotypeShow==true){
      //        addRole(this.ruleForm).then(res=>{
      //         // console.log(res);
      //         if(res.data.meta.status==201){
      //             this.$message({
      //                 type: 'success', // success error warning
      //                 message: res.data.meta.msg,
      //             })
      //             this.getlist()
      //         }
      //       })

      //     }else{
      //         // 编辑
      //         editRole(this.etid, this.ruleForm).then(res=>{
      //             console.log(res);
      //         })
      //     }

      //         this.dialogFormVisible=false
      //         this.ruleForm={
      //              roleName:"",
      //             roleDesc:""
      //         }
      if(this.twotypeShow){
      addRole(this.ruleForm).then(res=>{
        console.log(res)
        if (res.data.meta.status == 201) {
              this.$message.success(res.data.meta.msg);
             
              this.dialogFormVisible = false;
              this.getlist();
            }
       })
      }else{
          let obj={
            id:this.etid,
            
            roleName:this.ruleForm.roleName,
            roleDesc:this.ruleForm.roleDesc
          }

          editRole(obj).then(res=>{
               console.log(res);
               if (res.data.meta.status == 201) {
                  this.$message.success(res.data.meta.msg);
                  this.dialogVisible = false;
                  
               }
               this.getlist();
        })
        this.twotypeShow=true
      }
       this.ruleForm= {
                     roleName:"",
                    roleDesc:""
                 },
       this.dialogFormVisible=false
       
    },
    // 所有权限  tree状
    power(row) {
      this.restockid = row.id;
      this.dialogVisible = true;
      getPermissions("tree").then(res => {
        console.log(res, 1);
        this.treelist = res.data.data;
        console.log(this.treelist);
      });
      console.log(row, 245);
      let newArr = [];
      function fn(params) {
        if (params.children) {
          return fn(params.children);
        }
        params.forEach(item => {
          newArr.push(item.id);
        });
      }
      this.idArr = newArr;
      fn(row);
    },
    // power(row){
    //   this.restockid=row.id;
    //   this.dialogVisible = true;
    //   getPermissions('list').then(res=>{
    //     console.log(res);
    //     let formal=res.data.data
    //      console.log(formal);
    //     let nums=[]  //存放数据
    //     let arr =[]
    //     // 封装函数
    //     function trees(formal) {
    //       // 循环遍历找到第一层数据
    //        formal.forEach(item => {
    //         if(item.pid==0){
    //          return nums.push({...item,children:[]})
    //         }
    //         // 第二层
    //         formal.forEach(item=>{
    //           nums.forEach(items=>{
    //             if(items.pid == item.id && items.level != '2'){
    //               return items.children.push({...items,children:[]})
    //             }
    //           })

    //         })
    //         // 第三层
    //         formal.forEach(item=>{
    //           nums.forEach(el=>{
    //             el.children.forEach(ele=>{
    //               if(ele.level=='2'&&ele.path==item.path){
    //                 ele.children.push(ele)
    //               }
    //             })
    //           })
    //         })
    //        });

    //     }
    //     trees(formal)
    //     this.treelist=nums
    //     console.log(this.treelist);
    //     console.log(arr);

    //   })
    // }，

    // 修改权限确定
    disaggregate() {
      // 获取 全勾选中的和半勾选中的  将两者合并在一起
      // getCheckedKeys()  将全选择的节点 组成数组
      // getHalfCheckedKeys()  将半选中的节点 组成数组
      let SelectAll = this.$refs.tree.getCheckedKeys(); //全
      let SelectHalf = this.$refs.tree.getHalfCheckedKeys(); //半
      let newSeltArr = [...SelectAll, ...SelectHalf];
      // 以， 分割
      let division = newSeltArr.join(",");
      RoleAuthorization({ roleId: this.restockid, rids: division }).then(
        res => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.$message({
              type: "success", // success error warning
              message: res.data.meta.msg
              // duration: 2000,
            });
            this.getlist();
          }
          this.dialogVisible = false;
        }
      );
    },
    // 删除状态
    removeTrees(row,id){
      // console.log(row);
      console.log(row,id,'338');
      deleteRoleAuthorization({roleid:row,id:id}).then(res=>{
        console.log(res,1);
        this.getlist()
      })
    }
  },
  created() {
    this.getlist();
  }
};
</script>
